<template>
  <HeaderBar
      :isFixed="true"
      title="订单详情"
      navBarBgc="linear-gradient(180deg, rgba(152,203,179,1) 0%, rgba(169,211,190,1) 29%, rgba(215,230,221,1) 74%);"
  ></HeaderBar>
  <view class="page-container">
    <view class="header-container mt30">
      <view class="order-status-container flex justify-between items-end">
        <view class="left-container flex items-baseline">
          <i class="iconfont icon-clock"></i>
          <text class="ml20 status">{{orderDetailObj.statusContent}}</text>
        </view>
<!--        <view class="left-time">剩余： 14.32</view>-->
      </view>
      <view class="receiver-container flex items-center justify-between">
        <view class="left-container flex items-center">
          <i class="iconfont icon-locationfill"></i>
          <view class="info-container ml20">
            <view class="address">{{orderDetailObj.contactAddress}}</view>
            <view class="contact-container">{{orderDetailObj.contactName}} - {{orderDetailObj.contactPhone}}</view>
          </view>
        </view>
        <view
            class="change-address-btn ml20"
            v-if="orderDetailObj.status === 0 || orderDetailObj.status === 1" @click="showTouristAddress = true"
        >
          修改地址
        </view>
      </view>
    </view>
    <view class="provider-container">
      <view class="provider-name-container flex items-center">
        <i class="iconfont icon-w_shangdian"></i>
        <text class="ml10 mr10 second-title">{{orderDetailObj.providerName}}</text>
        <i class="iconfont icon-jiantouyou"></i>
      </view>
      <view class="product-container flex items-start justify-between">
        <view class="product-img-container">
          <image class="product-img" :src="orderDetailObj.productImg"></image>
        </view>
        <view class="product-info-container">
          <view class="product-name-number-container flex items-center justify-between">
            <view class="product-name">{{orderDetailObj.productName}}</view>
            <view class="price ml20">{{orderDetailObj.price}}</view>
          </view>
          <view class="favor-number-container flex items-center justify-between">
            <view class="favor">{{orderDetailObj.typeName}}</view>
            <view class="number">X{{orderDetailObj.quantity}}</view>
          </view>
          <view class="specification-container">
            规格：{{orderDetailObj.typeName}}  规格：{{orderDetailObj.specsName}}
          </view>
        </view>
      </view>
    </view>
    <view class="price-breakdown-container">
      <view class="module-title">价格明细</view>
      <view class="cell-container flex items-center justify-between">
        <view class="title">
          <text>商品总价</text>
          <text class="buy-number">共{{orderDetailObj.quantity}}袋</text>
        </view>
        <view class="value">{{orderDetailObj.totalPrice}}</view>
      </view>
      <view class="cell-container flex items-center justify-between">
        <view class="title">优惠金额</view>
        <view class="discount-value">
          <text>减</text>
          <text class="price-unit">￥</text>
          {{orderDetailObj.discountAmount || 0}}
        </view>
      </view>
      <view class="cell-container flex items-center justify-between">
        <view class="title">实付金额</view>
        <view class="value">{{(orderDetailObj.price * orderDetailObj.quantity).toFixed(2)}}</view>
      </view>
    </view>
    <view class="order-info-container">
      <view class="module-title">订单信息</view>
      <wd-cell
          custom-class="custom-cell-class"
      >
        <template #title>
          <text>订单编号</text>
        </template>
        <template>
          <view class="cell-value-container flex justify-end">
            <text>{{orderId}}</text>
            <view class="copy-btn">复制</view>
          </view>
        </template>
      </wd-cell>
      <wd-cell
          custom-class="custom-cell-class"
      >
        <template #title>
          <text>手机号码</text>
        </template>
        <template>
          <text>{{orderDetailObj.contactPhone}}</text>
        </template>
      </wd-cell>
      <wd-cell
          custom-class="custom-cell-class"
      >
        <template #title>
          <text>配送服务</text>
        </template>
        <template>
          <text>快递</text>
        </template>
      </wd-cell>
      <wd-cell
          custom-class="custom-cell-class"
      >
        <template #title>
          <text>下单时间</text>
        </template>
        <template>
          <text>{{dayjs(orderDetailObj.createDate).format("YYYY-MM-DD HH:mm:ss")}}</text>
        </template>
      </wd-cell>
      <wd-cell
          custom-class="custom-cell-class"
      >
        <template #title>
          <text>备注</text>
        </template>
        <template>
          <text>{{orderDetailObj.memo || "无"}}</text>
        </template>
      </wd-cell>
    </view>
    <!--  未支付 foot container  -->
    <view class="foot-btn-container" v-if="orderDetailObj.status !== 5 && orderDetailObj.status !== 7 && orderDetailObj.status !== 13">
      <view :class="['bottom-content-container','flex','justify-between',orderDetailObj.status === 6 ? 'items-center' : 'items-start']">
        <!--    待支付    -->
        <template v-if="orderDetailObj.status === 0">
          <view class="left-container" @click="showCancelOrderPopup = true">
            <i class="iconfont icon-quxiaodingdan"></i>
            <text>取消订单</text>
          </view>
          <view class="right-container flex items-start">
            <view class="amount-container">
              <view class="total-price-container">
                <text>合计：</text>
                <text>实付款</text>
                <text>{{(orderDetailObj.price * orderDetailObj.quantity).toFixed(2)}}</text>
              </view>
              <view class="amount-discount-container" v-if="orderDetailObj.discountAmount">
                共减￥{{orderDetailObj.discountAmount}}
              </view>
            </view>
            <view class="pay-btn ml20">立即支付</view>
          </view>
        </template>
        <!--  已支付 代发货      -->
        <template v-if="orderDetailObj.status === 1">
          <view class="refund-btn btn" @click="navRequestRefundPage">申请退款</view>
          <view class="service-btn btn flex items-center justify-center" @click="showCustomerServicePopup = true">
            <i class="iconfont icon-kefu mr20"></i>
            联系客服
          </view>
        </template>
        <!--  已发货 代收货    -->
        <template v-if="orderDetailObj.status === 4">
          <view class="service-btn btn flex items-center justify-center color22"  @click="showCustomerServicePopup = true">
            <i class="iconfont icon-kefu mr20"></i>
            联系客服
          </view>
          <view class="refund-btn btn color21" @click="handleConfirmOrder">确认收货</view>
        </template>
        <template v-if="orderDetailObj.status === 6">
          <i class="iconfont icon-kefu mr30 fs24"></i>
          <view class="operation-btn flex flex-1 justify-between">
            <view class="btn bgcolor6">申请开票</view>
            <view class="btn bgcolor6" @click="navRequestRefundPage">申请退款</view>
            <view class="btn color22 bgcolor7" @click="handleNavProductDetail">再次购买</view>
          </view>
        </template>
      </view>
      <view class="safe-content" :style="{height: safeAreaBottom + 'px'}"></view>
    </view>
    <wd-popup v-model="showCancelOrderPopup" custom-style="border-radius:10rpx;" @close="showCancelOrderPopup = false">
      <view class="cancel-order-container">
        <wd-icon name="info-circle-filled" size="32px" color="#FF0000FF" ></wd-icon>
        <view class="fs16 mt20 fw800">您确定要取消订单吗？</view>
        <view class="operation-container flex justify-around">
          <view class="confirmlBtn btn" @click="handleCancelOrder">狠心取消</view>
          <view class=" btn bgcolor7 color22" @click="showCancelOrderPopup = false">我再想想</view>
        </view>
      </view>
    </wd-popup>
    <TouristAddress
      :showTouristAddress="showTouristAddress"
      :touristAddressList="touristAddressList"
      @closeTouristAddress="closeTouristAddress"
    ></TouristAddress>
    <CustomServicePopup
      :showCustomerServicePopup="showCustomerServicePopup"
      @closePopup="showCustomerServicePopup = false"
    ></CustomServicePopup>
  </view>
</template>

<script setup>
  import dayjs from "dayjs";
  import {ref,} from "vue";
  import {orderDetail} from "@/api/common";
  import TouristAddress from "@/specialtySubPack/components/touristAddress/index.vue";
  import CustomServicePopup from "@/specialtySubPack/components/customerServicePopup/index.vue"
  import {cancelOrder, confirmOrder, editorOrderDetailTouristAddress, touristAddressListApi} from "@/api/specialty";

  const safeAreaBottom = ref(0);
  const orderId = ref("");
  const userId = ref("");
  const orderDetailObj = reactive({
    orderId: "",
    status: "",
    statusContent: "",
    address: "",
    contactName: "",
    contactPhone: "",
    contactAddress: "",
    typeName: "",
    specsName: "",
    quantity: "",
    providerId: "",
    providerName: "",
    productId: "",
    productImg: "",
    productName: "",
    productImage: "",
    productPrice: "",
    productType: "",
    price: "",
    totalPrice: "",
    discountAmount: "",
    payAmount: "",
    distributionType: "",
    createDate: "",
    memo: "",
  });
  const showCancelOrderPopup = ref(false);
  const showCustomerServicePopup = ref(false);
  const showTouristAddress = ref(false);
  const touristAddressList = ref([]);

  const handleConfirmOrder =  () => {
    uni.showModal({
      icon: "none",
      title: "提示",
      content: `确定订单 ${orderId.value} 收货吗?`,
      success:  async (modalRes) => {
        let {confirm} = modalRes;
        if (confirm) {
           await confirmOrder({orderId: orderId.value, userId: userId.value}).then(res => {
             queryOrderDetail();
          });
        }
      }
    })
  }
  const closeTouristAddress = async (event) => {
    console.log(event,'event');
    let { activeTouristIndex } = event;
    if(activeTouristIndex !== "") {
      let {province, city, district, address, name, tel, id} = touristAddressList.value[activeTouristIndex];
      await editorOrderDetailTouristAddress({
        orderId: orderId.value,
        addressId: id,
        consigneeName: name,
        consigneePhone: tel,
        consigneeAddress: province + city + district + address,
        userId: userId.value
      }).then(res => {
        let {result} = res;
        if(result) {
          queryOrderDetail();
          showTouristAddress.value = false;
        }
      });
    }
  };
  const handleNavProductDetail = () => {
    uni.navigateTo({
      url: `/specialtySubPack/pages/specialtyProductDetail/index?productId=${orderDetailObj.productId}`,
    })
  };
  const handleCancelOrder = async () => {
    await cancelOrder({orderId: orderId.value, userId: userId.value}).then(res => {
      showCancelOrderPopup.value = false;
      queryOrderDetail();
    })
  };
  const navRequestRefundPage = () => {
    uni.navigateTo({
      url: `/specialtySubPack/pages/orderDetail/requestRefundSpecialtyOrder?orderId=${orderId.value}`,
    })
  };
  const queryOrderDetail = async () => {
    await orderDetail({orderId: orderId.value, userId: userId.value}).then(res => {
      console.log(res,'res');
      let {
        id,
        status,
        consigneeAddress,
        consigneeName,
        consigneePhone,
        merchantName,
        merchantId,
        productName,
        productId,
        productImg,
        typeName,
        specsName,
        price,
        quantity,
        totalAmount,
        discountAmount,
        payAmount,
        memo,
        payTime
      } = res.result;
      orderDetailObj.orderId = id;
      orderDetailObj.status = status;
      // orderDetailObj.status = 0;
      orderDetailObj.contactAddress = consigneeAddress;
      orderDetailObj.contactName = consigneeName;
      orderDetailObj.contactPhone = consigneePhone;
      orderDetailObj.price = price;
      orderDetailObj.typeName = typeName;
      orderDetailObj.specsName = specsName;
      orderDetailObj.quantity = quantity;
      orderDetailObj.providerName = merchantName;
      orderDetailObj.providerId = merchantId;
      orderDetailObj.productName = productName;
      orderDetailObj.productId = productId;
      orderDetailObj.productImg = productImg;
      orderDetailObj.price = price;
      orderDetailObj.totalPrice = totalAmount;
      orderDetailObj.discountAmount = discountAmount;
      orderDetailObj.payAmount = payAmount;
      orderDetailObj.order = discountAmount;
      // orderDetailObj.createDate = dayjs(payTime).format("YYYY-MM-DD HH:mm:ss");
      orderDetailObj.createDate = "2025-04-30 11:00:55";
      orderDetailObj.memo = memo;

      let statusContent;
      switch (Number(status)) {
        case 0:
          statusContent = "待支付";
          break;
        case 1:
          statusContent = "已支付，待发货";
          break;
        case 4:
          statusContent = "已发货，待收货";
          break;
        case 5:
          statusContent = "已取消";
          break;
        case 6:
          statusContent = "已完成";
          break;
        case 7:
          statusContent = "退款中";
          break;
        case 13:
          statusContent = "已退款";
          break;
        case 14:
          statusContent = "售后处理中";
          break;
      }
      orderDetailObj.statusContent = statusContent;
    })
  };
  const queryTouristAddressList = async () => {
    await touristAddressListApi({}).then(res => {
      let {result} = res;
      if(result && result.length > 0) {
        touristAddressList.value = result;
      }
    });
  };

  onShow(() => {
    if(orderId.value) {
      queryOrderDetail();
    }
    queryTouristAddressList();
  });
  onLoad((options) => {
    let { orderId: _orderId, } = options;
    orderId.value = _orderId;
    let {userId: _userId} = uni.getStorageSync("userInfo");
    userId.value = _userId;
    safeAreaBottom.value = uni.getSystemInfoSync().safeAreaInsets.bottom;

    queryOrderDetail();
  });
</script>

<style lang="scss" scoped>
  .page-container {
    height: calc(100vh - 91px);
    padding: 91px 28rpx 100rpx 28rpx;
    background: linear-gradient(180deg, rgba(197,223,209,1) 0%, rgba(239,239,237,1) 25%, rgba(239,239,237,1) 30%, rgba(239,239,237,1) 97%);

    .header-container {
      border-radius: 20rpx;
      background: #1B9C61;
      overflow: hidden;
      .order-status-container {
        padding: 31rpx 29rpx 21rpx 29rpx;
        color: #EEEFE7;
        .left-container {
          .icon-clock {
            font-size: 36rpx;
          }
          .status {
            font-weight: 500;
            font-size: 39rpx;
          }
        }
        .left-time {
          font-size: 29rpx;
        }
      }
      .receiver-container {
        padding: 20rpx 29rpx;
        border-radius: 20rpx;
        background: #FFFFFF;
        .left-container {
          flex: 1;
          .icon-locationfill {
            font-size: 46rpx;
            color: #1b9c61;
          }
        }
        .change-address-btn {
          width: 139rpx;
          text-align: center;
          padding: 7rpx 0;
          font-size: 25rpx;
          border-radius: 10rpx;
          border: 1px solid #1B9C61;
          color: #1B9C61;
        }
      }
    }

    .provider-container {
      margin: 27rpx 0;
      padding: 25rpx 29rpx;
      border-radius: 10rpx;
      background: #ffffff;
      .provider-name-container {
        .second-title {
          font-weight: bold;
          font-size: 29rpx;
        }
        .icon-w_shangdian {
          font-size: 46rpx;
          font-weight: bold;
          color: #1b9c61;
        }
        .icon-jiantouyou {
          font-size: 36rpx;
          font-weight: bold;
          color: #32322b;
        }
      }
      .product-container {
        box-sizing: border-box;
        margin-top: 26.5rpx;
        .product-img-container {
          width: 125rpx;
          height: 125rpx;
          border-radius: 10rpx;
          overflow: hidden;
          .product-img {
            width: 100%;
            height: 100%;
          }
        }
        .product-info-container {
          width: 76%;
          .product-name-number-container {
            width: 100%;
            .product-name {
              font-size: 25rpx;
              font-weight: bold;
              color: #2B2B24;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .price {
              font-size: 22rpx;
              font-weight: bold;
            }
            .price:before {
              content: "￥";
              font-size: 20rpx;
            }
          }
          .favor-number-container {
            font-size: 22rpx;
            font-weight: 500;
            margin-top: 15.5rpx;
            color: #777777;
          }
          .specification-container {
            font-size: 22rpx;
            font-weight: 500;
            color: #777777;
          }
        }
      }
    }

    .price-breakdown-container {
      margin: 27rpx 0;
      padding: 25rpx 29rpx;
      border-radius: 10rpx;
      background: #ffffff;
      .module-title {
        font-size: 29rpx;
        font-weight: bold;
      }
      .cell-container {
        margin-top: 25rpx;
        .title {
          font-size: 25rpx;
          color: #2B2B24;
          .buy-number {
            margin-left: 15rpx;
            color: #777777;
          }
        }
        .value {
          font-size: 29rpx;
          font-weight: 500;
        }
        .value:before {
          content: "￥";
          font-size: 22rpx;
          margin-right: 10rpx;
        }
        .discount-value {
          font-size: 29rpx;
          font-weight: 500;
          color: #D33700;
          .price-unit {
            font-size: 22rpx;
          }
        }
      }
    }

    .foot-btn-container {
      box-sizing: border-box;
      position: fixed;
      width: 100%;
      left: 0;
      bottom: 0;
      padding: 28rpx 28rpx 0 28rpx;
      background: #FFFFFF;
      .bottom-content-container {
        .left-container {
          text-align: center;
          .icon-quxiaodingdan {
            font-weight: bold;
            font-size: 40rpx;
            color: #000000;
          }
          .text {
            margin-top: 10rpx;
            font-size: 25rpx;
          }
        }
        .right-container {
          .amount-container {
            .total-price-container {

              text:first-child {
                font-size: 25rpx;
                font-weight: bold;
              }
              text:nth-child(2) {
                font-size: 22rpx;
              }
              text:last-child {
                font-size: 39rpx;
              }
              text:last-child:before {
                content: "￥";
                font-size: 20rpx;
              }
            }
            .amount-discount-container {
              text-align: end;
              margin-top: 11rpx;
              font-size: 25rpx;
              color: #D33700;
            }
          }
          .pay-btn {

            padding: 28rpx 53.5rpx;
            font-size: 29rpx;
            border-radius: 10rpx;
            color: #EEF0DF;
            background: #1B9C61;
          }
        }
        .btn {
          font-weight: bold;
          font-size: 29rpx;
          width: 48%;
          padding: 20rpx 0;
          border-radius: 10rpx;
          text-align: center;
        }
        .refund-btn {
          color: #2B2B24;
          background: #EFEFED;
        }
        .service-btn {
          color: #EEF0DF;
          background: #1B9C61;
        }
        .operation-btn {
          font-size: 29rpx;
          font-weight: bold;
          .btn {
            width: 30%;
            padding: 20rpx 0;
            border-radius: 10rpx;
            text-align: center;
          }
        }
      }
    }

    .order-info-container {
      margin: 27rpx 0;
      padding: 25rpx 29rpx;
      border-radius: 10rpx;
      background: #ffffff;
      .module-title {
        margin-bottom: 30rpx;
        font-size: 29rpx;
        font-weight: bold;
      }
      :deep(.custom-cell-class) {
        padding: 0 !important;
        margin: 25rpx 0 0 0 !important;
        .wd-cell__wrapper {
          padding: 0 !important;
        }
      }
    }
    .cell-value-container {
      width: 500rpx !important;
      .copy-btn {
        margin-left: 10rpx;
        padding: 0 10rpx;
        font-size: 22rpx;
        border-radius: 10rpx;
        color: #EEEFE7;
        background: #1B9C61;
      }
    }
    .cancel-order-container {
      padding: 48.5rpx 0;
      text-align: center;
      width: 555.5rpx;
      .operation-container {
        margin-top: 83rpx;
        .btn {
          padding: 16rpx 41.5rpx;
          font-size: 25rpx;
          border-radius: 10rpx;
        }
        .confirmlBtn {
          border: 1px solid #C0C2B3;
        }
      }
    }
  }
</style>